<template>
  <div class="web-container">
    <h3 class="tl con-navs">
      <a
        class="navs"
        href="javascript:void(0)"
        v-for="(nav, index) in content.navs"
        :key="nav.name"
        @click="toPage(nav)"
      >
        {{ nav.title }}
        <span v-if="index != content.navs.length - 1">&nbsp;&nbsp;>&nbsp;&nbsp;</span>
      </a>
    </h3>
  </div>
</template>
<script>
import { defineComponent, reactive, watch, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  name: "mNav",
  props: {
    navs: {
      type: Array
    }
  },
  setup (props) {
    const router = useRouter();
    const content = reactive({
      navs: []
    });

    watch(props, (newProps, pre) => {
      content.navs = newProps.navs;
    })

    const toPage = (nav) => {
      if (!nav || !nav.name) return;
      router.push({ name: nav.name });
    };
    return {
      content,
      toPage,
    };
  }
});
</script>
<style lang="scss" scoped>
.con-navs {
  padding: 15px 5px;
}
a.navs {
  color: #1abc9c;
  font-weight: bolder;
}
</style>
